<template>
	<view>
		<navbar title="销售申请" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<image src="/static/personal/xssqbg.png" class="con__box__bg" mode=""></image>
				<view class="con__box__item">
					<view class="con__box__item__label">
						<image src="/static/personal/xm.png" class="con__box__item__label__xm" mode=""></image>
					</view>
					<input type="text" class="con__box__item__inp" v-model="form.name" placeholder="请输入姓名" />
				</view>
				<view class="con__box__item">
					<view class="con__box__item__label">
						<image src="/static/personal/sj.png" class="con__box__item__label__sj" mode=""></image>
					</view>
					<input type="number" maxlength="11" v-model="form.phone" class="con__box__item__inp" placeholder="请输入电话" />
				</view>
				<view class="con__box__item">
					<view class="con__box__item__label">
						<image src="/static/personal/sfz.png" class="con__box__item__label__sfz" mode=""></image>
					</view>
					<!-- <input type="text" class="con__box__item__inp" placeholder="请输入身份证号" /> -->
					<view class="" style="flex: 1;" @click="showcard=true">
						<view class="con__box__item__inp" v-if="form.idcard">
							{{form.idcard}}
						</view>
						<view v-else class="con__box__item__inp" style="color: #A1A4AA;">
							请输入身份证号码
						</view>
					</view>
				</view>
				<u-button color="#3262FD" @click="submit" :loading="lodbtn" text="提交"
					:customStyle='{width:"606rpx",height:"111rpx",marginTop:"10rpx",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'></u-button>
			</view>
		</view>
		<u-keyboard :showCancel='false' :showConfirm='false' safeAreaInsetBottom @close='showcard=false' @change="valChange" @backspace="backspace" ref="uKeyboard" mode="card" :show="showcard"></u-keyboard>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				form: {
					"name": "",
					"phone": "",
					"idcard": ""
				},
				showcard:false,
				lodbtn:false
			};
		},
		methods:{
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				if(this.form.idcard.length<18){
					this.form.idcard += val;
				}else{
					this.showcard=false
				}
				
				// console.log(this.form.idcard);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.form.idcard.length) this.form.idcard = this.form.idcard.substr(0, this.form.idcard.length - 1);
				// console.log(this.form.idcard);
			},
			async submit(){
				let {name,phone,idcard} = this.form
				if(!name){
					uni.$u.toast('请输入姓名')
					return
				}
				if(!phone){
					uni.$u.toast('请输入手机号')
					return
				}
				if(!idcard){
					uni.$u.toast('请输入身份证号码')
					return
				}
				this.lodbtn=true
				let _this=this
				let res = await user.salePost(this.form)
				
				if(res.data.code==1){
					uni.$u.toast('提交成功，等待审核')
					setTimeout(()=>{
						_this.lodbtn=false
						uni.navigateBack()
					},1000)
				}else{
					_this.lodbtn=false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f5;
	}

	.con {
		padding: 20rpx 30rpx 40rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 93rpx 41rpx 50rpx;

			&__bg {
				width: 336rpx;
				height: 439rpx;
				margin-left: 132rpx;
				margin-bottom: 68rpx;
			}

			&__item {
				height: 107rpx;
				background: #F6F9FF;
				border-radius: 15rpx;
				// padding: 0 47rpx;
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				&__label {
					width: 106rpx;
					display: flex;
					align-items: center;

					&__xm {
						width: 33rpx;
						height: 37rpx;
						margin-left: 47rpx;
					}

					&__sj {
						width: 28rpx;
						height: 35rpx;
						margin-left: 48rpx;
					}

					&__sfz {
						width: 36rpx;
						height: 30rpx;
						margin-left: 44rpx;
					}
				}

				&__inp {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333;
					line-height: 42rpx;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #A1A4AA;
						line-height: 42rpx;
					}
				}
			}
		}
	}
</style>